<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery-ajax</title>
</head>
<body>
    <form id="registerForm">
        <input type="text" name="uname" id="username" onblur="checkValue2(this)"><span id="username_span" class="init">
            * 请你输入用户名
        </span><br>
        <input type="text" name="pwd"><br>
        <input type="number" name="age"><br>
        <input type="button" value="register" onclick="registers()">
    </form>
    <script src="/prj/plugins/jquery/jquery.min.js"></script>
    <script>
        $(function () {
            //jquery对象和js对象之间是可以进行相互转换的
            //js对象负责调用value属性
            //jquery对象调用val()方法
            let input=document.getElementById("username");//js对象
            let input_obj=$("#username");//jquery对象

            //js->jquery
            //$(js对象)
            console.log($(input)).val();

            //jquery->js
            //jquery对象[0]
            console.log(input_obj)[0].value;
        })

        //一定要注意使用的是js对象还是jquery对象
        //因为只有jquery对象才有资格其调用jquery的api

        function checkValue(obj) {//obj是js对象
            $.ajax({
                type:"get",
                //请求参数可以直接拼接在url后面，也可以使用data属性来指定
                //url:'prj/ajax/check?uname='+obj.value,
                url:"/prj/ajax/check",
                data:"uname="+obj.value,
                success:function (data) {
                    //readyState==4&&status==200

                    //此处的data已经被jquery框架进行了处理
                    //已经将data[后台传过来的json字符串]->js对象[json对象]；
                    console.log(data);
                    console.log(data.code+":"+data.msg);
                },
                error:function () {
                    ////
                }
            });
        }

        //post请求
        function checkValue2(obj) {
            $.ajax({
                type:"post",
                url:"/prj/ajax/check",
                data:"uname="+obj.value,
                success:function(data) {
                    //readyState==4&&state==200
                    //此处的data已经被jquery框架进行了处理
                    //已经将data[后台传过来的json字符串]->js中的Json对象
                    console.log(data);
                    console.log(data.code+":"+data.msg);
                }
            })
        }

        //演示参数的发送
        function registers() {
            //第一种方式可以分别获取每个input空间的value
            //第二种方式直接可以进行表单的序列化
            //自动将空间的name属性的值作为key,value就是value
            let values=$("#registerForm").serialize();
            $.ajax({
                type:"post",
                url:"/prj/ajax/check",
                data:values,
                //data的values直接是一个json对象
                success:function (data) {
                    //readyState==4&&status==200

                    console.log(data);
                    console.log(data.code+":"+data.msg);
                }
            })
        }
    </script>
</body>
</html>